<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}
			
			.mui-pages {
				top: 46px;
				height: auto;
			}
			
			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
			}
			
			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 300ms ease;
				transition: transform 300ms ease;
			}
			
			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			
			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}
			
			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}
			
			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}
			
			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}
			
			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}
			
			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}
			
			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				width: auto;
			}
			
			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}
			
			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}
			
			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;
			}
			
			.mui-page {
				display: none;
			}
			
			.mui-pages .mui-page {
				display: block;
			}
			
			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}
			
			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}
			
			.mui-table-view {
				margin-top: 20px;
			}
			
			.mui-table-view span.mui-pull-right {
				color: #999;
			}
			
			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}
			
			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}
			
			.head {
				height: 40px;
			}
			
			#head {
				line-height: 40px;
			}
			
			.head-img {
				width: 40px;
				height: 40px;
			}
			
			#head-img1 {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}
			
			.update {
				font-style: normal;
				color: #999999;
				margin-right: -25px;
				font-size: 15px
			}
			
			.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			
			.mui-ios .mui-navbar .mui-bar .mui-title {
				position: static;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/feedback-page.css" />
	</head>

	<body class="mui-fullscreen">

		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" id="bj">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">报警</span>
			</a>
			<a class="mui-tab-item" id="bk">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">布控</span>
			</a>
			<a class="mui-tab-item mui-active" id="wd">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
				</button>
				<h1 class="mui-center mui-title">个人中心</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" href="#account">
									<div class="mui-media-body">
										Hello <span id="realname"></span>
										<p class='mui-ellipsis'>警号：<span id="jinghao"></span></p>
									</div>
								</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#pwd" class="mui-navigate-right">修改密码</a>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" style="text-align: center;">
								<a id="tcdl">退出登录</a>
							</li>
						</ul>
					</div>
				</div>

			</div>
			<!--页面主内容区结束-->

		</div>
		<!--单页面结束-->
		<div id="account" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">个人信息</h1>
				<button id="grxx" type="button" class="mui-left mui-btn mui-btn-link mui-btn-nav mui-pull-right">
					保存
				</button>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<div class="mui-input-row">
									<label>姓名</label>
									<input type="text" placeholder="请输入姓名" id="gr_xm" />
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="mui-input-row">
									<label>性别</label>
									<select id="gr_sex">
										<option value="1" selected="selected">男</option>
										<option value="0">女</option>
									</select>
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="mui-input-row">
									<label>警号</label>
									<input id="gr_jh" type="number" placeholder="请输入警号" />
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="mui-input-row">
									<label>手机</label>
									<input type="number" id="gr_sj" placeholder="请输入手机号" />
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div id="pwd" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">密码修改</h1>
				<button id="xgmm" type="button" class="mui-left mui-btn mui-btn-link mui-btn-nav mui-pull-right">
					保存
				</button>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<div class="mui-input-row">
									<label>旧密码</label>
									<input id="oldpwd" type="password" placeholder="请输入旧密码" />
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="mui-input-row">
									<label>新密码</label>
									<input id="newpwd" type="password" placeholder="请输入新密码" />
								</div>
							</li>
							<li class="mui-table-view-cell">
								<div class="mui-input-row">
									<label>确认密码</label>
									<input id="rnewpwd" type="password" placeholder="请输入确认密码" />
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

	</body>
	<script src="js/mui.min.js "></script>
	<script src="js/mui.view.js "></script>
	<script src='libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
	<script src='libs/easymob-webim-sdk/strophe-custom-2.0.0.js'></script>
	<script src='libs/easymob-webim-sdk/json2.js'></script>
	<script src="libs/easymob-webim-sdk/easemob.im-1.0.5.js"></script>
	<script src="js/config.js"></script>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#setting'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();

		mui.plusReady(function() {

		});

		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
		})(mui);

		$(function() {
			$("#bk").on("tap", function() {
				mui.openWindow({
					url: "dc.html",
					id: "dc",
					createNew: true,
					show: {
						aniShow: "none"
					}
				});
				$(".mui-bar-tab a").removeClass("mui-active");
				$("#wd").addClass("mui-active");
				return false;
			});
			$("#bj").on("tap", function() {
				mui.openWindow({
					url: "index.html",
					id: "bj",
					createNew: true,
					show: {
						aniShow: "none"
					}
				});
				$(".mui-bar-tab a").removeClass("mui-active");
				$("#wd").addClass("mui-active");
				return false;
			});
			$("#wd").on("tap", function() {
				mui.openWindow({
					url: "setting.html",
					id: "wd",
					createNew: true,
					show: {
						aniShow: "none"
					}
				});
				$(".mui-bar-tab a").removeClass("mui-active");
				$("#wd").addClass("mui-active");
				return false;
			});
			$("#tcdl").click(function() {
				mui.confirm("确定退出系统吗？", "提示", function(e) {
					if(e.index == 1) {
						localStorage.clear();
						$.post(dataDomain + "/common/adminuser/exit", {}, function(req) {
							if(req.status == 'ok') {
								mui.openWindow({
									url: "login.html",
									id: "login",
									createNew: true,
									show: {
										aniShow: "none"
									}
								})
							} else {
								mui.toast("请求失败，请稍候再试。");
							}
						});
					}
				});
			});
			var adminuser = JSON.parse(localStorage.adminuser);
			$("#realname").html(adminuser.realName);
			$("#jinghao").html(adminuser.policeNo);
			$("#gr_xm").val(adminuser.realName);
			$("#gr_sex").val(adminuser.sex);
			$("#gr_jh").val(adminuser.policeNo);
			$("#gr_sj").val(adminuser.phone);
			$("#grxx").on("tap", function() {
				$.ajax({
					type: "PUT",
					url: dataDomain + "/common/adminuser/" + adminuser.id,
					data: {
						realName: $("#gr_xm").val(),
						sex: $("#gr_sex").val(),
						phone: $("#gr_sj").val(),
						policeNo: $("#gr_jh").val()
					},
					success: function(req) {
						if(req.status == 'ok') {
							mui.toast("修改成功。");
						} else {
							mui.toast("修改失败，请稍候再试。");
						}
					}
				});
			});
			$("#xgmm").on("tap", function() {
				var oldpwd = $("#oldpwd").val();
				var newpwd = $("#newpwd").val();
				var rnewpwd = $("#rnewpwd").val();
				if(oldpwd == '') {
					mui.alert("请输入旧密码");
					return false;
				}
				if(newpwd == '') {
					mui.alert("请输入新密码");
					return false;
				}
				if(rnewpwd == '') {
					mui.alert("请输入重复新密码");
					return false;
				}
				if(newpwd != rnewpwd) {
					mui.alert("两次密码输入不一致");
					return false;
				}
				$.ajax({
					type: "PUT",
					url: dataDomain + "/common/adminuser/updpwd",
					data: {
						id: adminuser.id,
						oldpwd: $("#oldpwd").val(),
						newpwd: $("#newpwd").val()
					},
					async: true,
					success: function(req) {
						if(req.status == 'ok') {
							mui.toast("密码修改成功");
							$.post(dataDomain + "/common/adminuser/exit", {}, function(req) {
								if(req.status == 'ok') {
									mui.openWindow({
										url: "login.html",
										id: "login",
										createNew: true,
										show: {
											aniShow: "none"
										}
									})
								} else {
									mui.toast("请求失败，请稍候再试。");
								}
							});
						} else if(req.status == 'olderror') {
							mui.toast("旧密码输入错误，修改失败");
						} else {
							mui.toast("请求失败，请稍候再试");
						}
					}
				});
			});
		})
	</script>

</html>